<template>
	<div style="background-color: #f4fafe;">
		<div class="main">
			<div>
				Login</div> <div style="text-align: center;">
					<el-dropdown>
						<span class="el-dropdown-link">
							<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" slot="header_image"></el-avatar>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
							<el-dropdown-item @click.native="Person">个人信息</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
			</div>
		</div>
		<div class="main_content">
			<div class="left">
				<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
					<el-menu-item index="1">
						<i class="el-icon-price-tag"></i>
						<span slot="title" @click="$router.push()">首页</span>
					</el-menu-item>
					<el-menu-item index="3">
						<i class="el-icon-document-copy"></i>
						<span slot="title" @click="CourseList()">我的课程</span>
					</el-menu-item>
					<el-menu-item index="6">
						<i class="el-icon-document"></i>
						<span slot="title" @click="QuestionBank()">收件箱</span>
					</el-menu-item>
					<!-- <el-submenu index="1">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>课程管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click="CourseList()">课程列表</el-menu-item>
							<el-menu-item index="1-2">创建课程</el-menu-item>
						</el-menu-item-group>
					</el-submenu> -->
					<!-- <el-submenu index="3">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>班级管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click="ClassList()">班级列表</el-menu-item>
							<el-menu-item index="1-2">创建班级</el-menu-item>
						</el-menu-item-group>
					</el-submenu> -->
					<!-- <el-submenu index="4">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>题库管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click="QuestionBank()">题库列表</el-menu-item>
							<el-menu-item index="1-2">创建题库</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
 -->
				</el-menu>
			</div>
			<div class="right">
				<router-view />
			</div>
		</div>

	</div>
</template>

<script>
	export default{
		data()
		{
			return{
				
			}
		},
		methods:{
			handleOpen()
			{
				
			},
			handleClose()
			{
				
			},
			ClassList()
			{
				this.$router.push("/ClassList");
			},
			CourseList()
			{
				this.$router.push("/CourseList");
			},
			QuestionBank()
			{
				this.$router.push("/QuestionBank");
			},
			Examanagement()
			{
				this.$router.push('/Examanagement');
			}
		}
	}
</script>

<style scoped="scoped">
	.main {
		width: 100%;
		height: 4.25rem;
		line-height: 4.25rem;
		display: flex;
		justify-content: space-between;
		color: white;
		background-color: #03d3bd;
	}

	.main>div {

		margin-left: 20px;
		margin-right: 1.25rem;
	}

	.main_content {
		display: flex;
		margin-left: 20px;
		margin-right: 1.25rem;
	/* 	margin-top: 0.625rem; */
		

	}

	.left {
		width: 12%;
        overflow: hidden;
		/* height: 200px; */
		/* background-color: #0074D9; */
	}

	.el-menu {
		background-color: #ffffff;
		height: 100vh;
		border: none;
	}

	/* .left>ul>li {
		width: 100%;
		height: 1.875rem;
		list-style: none;
		text-align: center;
		background-color: white;
	}
 */
	.right {
		width: 88%;
	/* 	height: 200px; */
		/* background-color: #aaffff; */
	}

	.is-active {}

	.el-submenu .el-menu-item {
		min-width: 0;
	}
</style>
